Add retry logic, network resilience, and missing image sizes UI for media uploads#76765
Add retry logic, network resilience, and missing image sizes UI for media uploads#76765adamsilverstein wants to merge 10 commits intotrunkfrom
Conversation
Adds automatic retry with exponential backoff for transient upload failures (network errors, timeouts, server errors). Also adds a hook to detect and regenerate missing image sub-sizes when the editor loads. Key features: - ErrorCode enum for error classification and retry decisions - Exponential backoff with jitter to prevent thundering herd - PendingRetry status and retry selectors for state tracking - useMissingSizesCheck hook for missing image sub-size detection - queueMissingSizeGeneration action for client-side sub-size generation Depends on #74917 for error handling infrastructure. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +2.06 kB (+0.03%) Total Size: 7.74 MB
ℹ️ View Unchanged
|
- Remove automatic missing sizes generation on editor load - Add info icon indicator on images with missing sub-sizes in the editor - Add "Missing image sizes" panel in pre-publish checks with Generate action - Add network reconnection handling to pause/resume upload queue on offline/online Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
adamsilverstein
added
[Type] Enhancement
adamsilverstein
requested review from
andrewserong and
swissspidy
and removed request for
ajitbohra and
fabiankaegy
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
github-actions
bot
added
[Package] Editor
adamsilverstein
changed the title
|
@andrewserong I took another pass at how we could handle resiliency by introducing some user facing UI for the case when uploads have failed for some reason and there are missing image sizes. I also added some resilience if the browser goes offline in the middle of processing and then comes back online, the processing should continue. Probably need some design feedback here, I wanted to give it a try to see how it feels verses to "automatic" missing size generation which might be unexpected for users as you pointed out. |
|
Flaky tests detected in 713b416. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23967367435
|
|
@jasmussen Since you are digging into client side media, I would appreciate your feedback on the UI I am proposing here! |
|
@andrewserong I noticed during testing that it is now possible to save during uploads. previously this was prevented. Its really only possible to reproduce the broken upload issue if you save with a partially complete upload. If you just refresh the browser, the uploading image will not be saved in the page at all. I personally feel its better to prevent saving during image processing, in which case we can probably close this issue/pr as not planned since images should either upload completely or not be included in the post. What do you think? |
|
Follow up to fix post locking saving during uploads (again): #76971 |
|
I guess one other way you can wind up with missing image sizes is if you change themes, if a new theme adds some sizes, all existing uploads will lack these sizes. this would give users a way to generate those sizes on the fly, although admittedly its probably better suited for the media library as a bulk action. |
Yes, I'd agree, I think preventing saving during the upload should be the main priority. Being able to retry / add missing image sizes is a neat feature, though...
I think this is a good point. Perhaps with some of these ideas, it sort of points towards features we might like to add if/when we get to implementing client-side media processing in the media library proper. That could be a good place to have admin / utility-like behaviour to review missing sizes, perform bulk actions and the like 👍 |
|
Thanks for all of this work. What you are doing in general is fundamentally working on quality of life improvements for users, and relief for servers. Kudos, this is in-engine work that when it works well is invisible to most, but transformative. A thankless job, so here's a thank you. As has become a habit of mine, I'm going to ask a question that could easily fall into the category of dumb/obvious, based on lacking a full understanding, I hope in advance you'll forgive this. Today when you upload an image, n sizes will be created across thumbnail, medium, large, and any other sizes you might have registered, in addition to the full source. These are created by the server, always, and in many cases these dimensions will never be used. The new approach generates these on the client-side, when needed. Can these not just be created while you are publishing the post? This may already be the case, and what this extra PR does is explained here:
That the overlay is in addition to those generated on first publish. Is that correct? If yes, then my instinct as it has been in a couple of other issues, is to embrace a linting tool for additional visibility. There hasn't yet been a dedicated issue for this, so I went ahead and created one: #76996 In this case, that would mean any image block that's missing generated sizes would get its own Note with information about the issue. Possibly a button to fix it? TBD. I know that's a lot to start, and it doesn't need to be the only solution. But what I'd do in the meantime is make the error much more obvious: I'd possibly move the actual "Generate missing images" button the block toolbar, and add a red border around the image block itself. |
How are you imagining this? Triggering upload during "Publish" means the user will to have to wait for a while until everything is finished, i.e., they must not navigate away or close the page. That doesn't sound like a good experience to me. |
adamsilverstein
removed
[Package] Editor
Thanks!
The sub sizes are created when you upload the image using the client side approach, just on the client instead of the server. So not on publish or when needed, but on upload.
Yes. This could happen if you change themes and the theme includes new sizes. The new sizes will be missing from all previously uploaded images. You can use a plugin to regenerate images and fill in those missing images. Deleting older/removed sizes is riskier, because there could be references to those images in published posts.
I like this idea generally, makes way more sense from a user from perspective - one button to click to fix all of the images. I'd put this button in the publish panel, but the toolbar could work as well. It would only show if images were missing sizes. I'm not sure about a red border idea - besides not being accessible, it feels a bit alarming. Missing images isn't really a huge issue - WordPress can and will substitute another image size. A small (red!) alert icon might work better, and only shown when using the feature (eg when you first click the button to fix it). |
Exactly why we process at upload, then the processing can happen in the background while the user continues working on their post. |
To clarify, it could be both/all of the places I propose, button toolbar, panel in pre/post-publish, linting tool. And/or whichever makes sense to start with.
Can try anything that works and we can feel it out. My reason for a border (can be any color, also dashed or thicker, different color), is to have something that works on any scale image, but is also more generic. Always on my mind is the idea that "blocks" can have a multitiude of notices/warnings/errors, and we need a generic approach to surfacing these so we don't end up with 10 different implementations of notifying about issues. Not really related, just fun; here's a 2022 series of mockups showing a different approach to surfacing blocks with markup errors, or missing block plugins. Not sure that dot has aged well, but it's fundamentally the same issue: 
|
Well this does feel related since its about notifying users about an issue with a block. In this case, an image block with missing sub-sizes. I like how simple the implementation is and how the dot floats in the margin - right beside the block - instead of the current PR where it sits over the image.
I feel like a dot beside the block with a dropdown is a good approach and close to where I started anyway. The contents of the menu could grow or change depending on what we want to alert users about. How do you feel about showing the notification dots all the time vs. only when reviewing, eg when on the pre-publish panel is active? Thinking about it more, adding individual actions for each image doesn't make much sense when a user changes themes and every image is missing sub-sizes. Clicking into every image to fix it would be tedious, so I'm going to focus on a pre-publish panel approach. This feels like the right place to alert users of the missing sub sizes issue, if the user clicks the "generate missing sub-size images" (or similar) button, the UI shows a spinner until all images are regenerated. Since this could take quite some time if there are more than a few images, the UI should probable show a simple message during the update run based on the number of images it is generating sub sizes for 'Generating missing sizes for image x of y'. Clicking the button should be optional, the user can publish the post without fixing the missing images (they may not care). |
Remove the per-image indicator overlay (info icon + popover) from the
image block. When a user changes themes and every image is missing
sub-sizes, clicking into each image individually would be tedious.
Instead, consolidate the missing sizes notification into the
pre-publish panel where users get a single "Generate missing sizes"
button to fix all images at once. Add progress text showing which
image is being processed ("Generating missing sizes for image X of Y")
and improve the panel to remain visible during generation even after
sizes start completing.
github-actions
bot
added
[Package] Editor
|
Had I designed this today, I probably wouldn't have made the in-canvas UI for this, as it falls apart on mobile or in full-wide images. Potentially another button in the block toolbar, or as noted, a linting tool. The big challenge here is separating UI from content, which has often been an issue both as far as big placeholders causing layout issues, or just actual UI being mistaken for real content/design. It's been a bit of a stressful back and forth with work lately, so no real obvious solutions come to mind beyond what's already discussed. I'd welcome other input as well! |
|
Just adding my thoughts to this after catching up with everyone. @jasmussen mentions: > In this case, that would mean any image block that's missing generated sizes would get its own Note with information about the issue. Possibly a button to fix it? TBD. This makes me wonder if we even should surface ‘by’ the image and have that button to fix. I tend to agree with this, although have concerns over the border being too distracting for users:
I do appreciate the subtle indication but it’s just going to get lost on certain images. @adamsilverstein you mention the dot, this also is something @jasmussen you have concerns about for indication and scaling. I do too. I think simple identification is needed here, not a confusion.
I would tend to fallback on these two things for ease:
I agree with this:
I like the idea of fix in one solutions where we can and surfacing those opportunities over image by image. Whilst we can have that type of triage if people want, the more we have ‘just fix this all’ for people the better. |
|
Putting the check in the pre-publish panel looks like this in the current PR: 
However when testing this out I realized we also need to account for already published posts, a perhaps more likely scenario for missing images that need fixing. So this brings up the question of how to make users aware there is an issue on published posts. Maybe there could be a line/warning in the Post panel? "Media: fix missing sub-sized images" 
Going back to "A simple ‘beside block’ toolbar indication." the menu option could be or include "Fix all images" so the user isn't forced to fix images one at a time. |
Avoids polluting the core-data entity store when checking for missing image sizes in the pre-publish panel. Using getEntityRecord with context: 'edit' for attachment entities was causing hasNonPostEntityChanges to return true, which changed the publish button label from "Publish" to "Save".
Moves the apiFetch-based missing image sizes detection logic into a reusable hook so both the pre-publish panel and the post sidebar can use it without duplicating code.
Replace inline detection logic with the useMissingSizes hook. No behavior change, just code reuse.
Show a "Fix missing image sizes (N)" row in the Post sidebar panel when editing an already-published post that has images with missing sub-sizes. This addresses the scenario where users edit published posts and need to be aware of missing image sub-sizes.
|
A quick note as I see the pre-publish panel: @ellatrix created a nice similar panel for missing uploads in the case where you've hotlinked an image. It seems a relatively adjacent use case that could use/benefit from the seame infrastructure. |
Good call - this is a very similar problem, just with a different path to arriving at having images without the required processing. I will review that to make sure they align. I also wonder: does anything show on published posts? (and where) |
To the best of my knowledge, no, it shows up only in pre-publish: 
That isn't necessarily the perfect pattern: if you end up with something in the outline or elsewhere, arguably this same upload feature would also benefit from presence there. Separately: I'm heading on a break for a little bit, so my responses will be delayed. |
Thats worth something for sure, I'm just not sure how useful it is for images with missing sizes. A natural place to add the "generate missing sizes" functionality would be the post list screen or the media library, maybe we can add in the new media experiments.
Have a nice break! |
5 participants
Summary
Fixes #76790
Enhances client-side media processing with three reliability improvements:
Missing Image Sizes — User Flow
Instead of auto-generating missing sizes silently on editor load, this PR gives users control:
Image Block — Info Icon Indicator
An info icon badge appears at the top-right corner of images with missing sub-sizes:
Popover — Generate Action
Clicking the icon opens a popover with a Generate link to create missing sizes:
Pre-Publish Panel — Missing Sizes Warning
The pre-publish panel shows a suggestion to generate missing sizes for all images:
Pre-Publish Panel — Generation In Progress
After clicking Generate, a spinner shows until all sizes are processed:
Retry Flow
flowchart LR A[Upload] --> B[Processing] B --> C{Success?} C -->|Yes| D[Complete] C -->|No| E{Retryable?} E -->|No| F[Failed] E -->|Yes| G{Attempts < 3?} G -->|No| F G -->|Yes| H[Wait with backoff] H -->|1s / 2s / 4s| BNetwork Resilience
flowchart LR A[Upload Queue] --> B{Browser Online?} B -->|Yes| C[Continue Processing] B -->|No| D[Pause Queue] D --> E[Wait for reconnect] E -->|online event| F[Resume Queue] F --> C C --> G[Complete]Missing Sizes User Flow
flowchart TD A[Editor Loads] --> B[Fetch attachment data via REST API] B --> C{Missing image sizes?} C -->|No| D[Normal editing] C -->|Yes| E[Show info icon on image] E --> F[User clicks icon] F --> G["Popover: Some sizes missing — Generate"] G --> H[User clicks Generate] H --> I[Fetch original image] I --> J[Process missing sizes client-side] J --> K[Sideload to server] K --> L[Invalidate cache & hide indicator] A --> M[User opens pre-publish panel] M --> N{Any images with missing sizes?} N -->|Yes| O["Show Missing image sizes panel"] O --> P[User clicks Generate] P --> Q[Process all missing sizes] Q --> R[Spinner until complete]Screenshots
icon
generate option
generating spinner
Test plan